<template>
  <div>
    <v-snackbar
      v-model="show"
      :top="true"
      :right="false"
      :bottom="false"
      :left="false"
      :timeout="$store.getters['toast/duration']"
      color="white"
      class="reToast"
    >

      <v-icon v-if="$store.getters['toast/isSuccess']" color="green darken-3">mdi-checkbox-marked-circle</v-icon>
      <v-icon v-if="$store.getters['toast/isError']" color="red darken-3">error</v-icon>
      <v-icon v-if="$store.getters['toast/isWarning']" color="yellow darken-3">warning</v-icon>

      <div style="margin-left: 6px;">
        {{ $store.getters["toast/message"] }}
      </div>

    </v-snackbar>
  </div>
</template>

<script lang="ts">
import {Component, Vue} from "vue-property-decorator";

@Component({
  name: "Toast",
  computed: {
    show: {
      get() {
        return this.$store.getters["toast/show"];
      },
      set(value: boolean) {
        this.$store.commit("toast/setShow", value);
      }
    }
  }
})
export default class Toast extends Vue {

}
</script>

<style lang="scss">
@import "../styles/main";
$boxShadow: #B5B5CA;

.reToast {

  .v-snack__wrapper {
    height: 40px;
    min-height: 40px;
    min-width: 124px;
    box-shadow: 0 6px 16px 0 #{$boxShadow}ca !important;
    border: 0.5px solid $borderFill;
    margin-top: 16px;
  }

  .v-snack__content {
    color: $dark;
    display: flex;
    align-items: center;
    padding: 10px 18px;
  }

  .v-snack__action {
    margin-right: 0 !important;
  }
}

</style>
